<style>
    .external-event {
        /*padding: 10px 10px;*/
        font-weight: bold;
        margin-bottom: 14px;
        /*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);*/
        /*text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);*/
        border-radius: 3px;
        cursor: move;
    }

    .external-event button {
        margin-bottom: 14px !important;
    }

    .layui-btn + .layui-btn {
        margin-left: auto !important;
    }
</style>
<link rel="stylesheet" type="text/css" href="/static/work/workflow.3.0.css"/>
<div class="layui-row">
    <div class="layui-col-md3">
        <div class="grid-demo  grid-demo-bg1">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>功能栏</legend>
            </fieldset>

            <blockquote class="layui-elem-quote layui-quote-nm">
                <div id='external-events-list'>
                    <div class='fc-event external-event'>
                        <button type="button" id="wfSave" class="layui-btn  layui-btn-fluid">保存</button>
                        <button type="button" id="wfAdd" class="layui-btn  layui-btn-fluid">新增</button>
                        <button type="button" class="layui-btn  layui-btn-fluid">逻辑</button>
                        <button type="button" id="wfCleam" class="layui-btn  layui-btn-fluid">清空</button>
                        <button type="button" class="layui-btn  layui-btn-fluid">刷新</button>
                    </div>
                </div>
            </blockquote>

        </div>
    </div>
    <div class="layui-col-md9">
        <div class="grid-demo">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>流程设计栏</legend>
            </fieldset>

            <blockquote class="layui-elem-quote layui-quote-nm">
                <div id="flowdesign_canvas" style=" height: 500px;">

                </div>
            </blockquote>
        </div>
    </div>

</div>
<script type="text/javascript" src="/static/work/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/static/work/jquery-ui-1.9.2-min.js?"></script>
<script type="text/javascript" src="/static/work/jsPlumb-1.3.16-all-min.js"></script>
<script type="text/javascript" src="/static/work/workflow.3.0.js"></script>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
    var the_flow_id = '{$one.id}', attribute = "{:url('flow/attribute')}";
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table'], function () {
        var $ = layui.$
            , form = layui.form
            , table = layui.table;
        var attributeModal = $("#attributeModal");

        //属性设置
        attributeModal.on("hidden", function () {
            $(this).removeData("modal");//移除数据，防止缓存
        });
        /*创建流程设计器*/
        var _canvas = $("#flowdesign_canvas").Flowdesign({
            "processData": {$process_data | raw
        }, fnClick:function () { /*步骤单击*/
            var param = $.param({'id': _canvas.getActiveId()});
            layer.open({
                type: 2
                , skin: 'layui-layer-molv'
                , title: '属性控制栏'
                , content: attribute + '?' + param
                , area: ['80%', '80%']
                , maxmin: true
                , btn: ['确定', '取消']
                , yes: function (index, layero) {
                    var iframeWindow = window['layui-layer-iframe' + index]
                        , submitID = 'LAY-user-back-submit'
                        , submit = layero.find('iframe').contents().find('#' + submitID);
                    //监听提交
                    iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                        var field = data.field; //获取提交的字段
                        //提交 Ajax 成功后，静态更新表格中的数据
                        $.ajax({
                            url: attribute + '?' + param,
                            type: 'post',
                            data: field,
                            success: function (res) {
                                if (res.code === 0) {
                                    layer.msg(res.msg, {icon: 1});
                                    location.reload();
                                    layer.close(index); //关闭弹层
                                } else {
                                    layer.msg(res.msg, {icon: 5});
                                    return false;
                                }
                            }
                        });
                    });
                    submit.trigger('click');
                }
            });
        },fnDbClick:function () {
            layer.confirm('确定删除吗？', {icon: 3, title: '提示'}, function (index) {
                var activeId = _canvas.getActiveId();//右键当前的ID
                var url = "{:url('delete_process')}";
                $.post(url, {"flow_id": the_flow_id, "process_id": activeId}, function (data) {
                    if (data.status == 1) {
                        _canvas.delProcess(activeId);
                        var processInfo = _canvas.getProcessInfo();//连接信息
                        var url = "{:url('save_canvas')}";
                        $.post(url, {"flow_id": the_flow_id, "process_info": processInfo}, function (data) {
                            location.reload();
                        }, 'json');
                    }
                    layer.msg(data.msg);
                }, 'json');
                layer.close(index);
            });
        }
    });
        /*保存*/
        $("#wfSave").bind('click', function () {
            var processInfo = _canvas.getProcessInfo();//连接信息
            var url = "{:url('save_canvas')}";
            $.post(url, {"flow_id": the_flow_id, "process_info": processInfo}, function (data) {
                layer.msg(data.msg);
            }, 'json');
        });
        $("#wfRefresh").bind('click', function () {
            location.reload();
        });
        $("#wfHelp").bind('click', function () {
            layer.open({
                type: 2,
                title: '工作流官网',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['893px', '600px'],
                content: '//cojz8.com/'
            });
        });
        $("#wfCheck").bind('click', function () {
            var url = "{:url('Checkflow')}";
            $.post(url, {"fid": the_flow_id}, function (data) {
                if (data.status == 1) {
                    layer.msg(data.msg);
                } else {
                    layer.msg(data.msg);
                }
            }, 'json');
        });
        $("#wfAdd").bind('click', function () {
            var url = "{:url('add_process')}";
            $.post(url, {"flow_id": the_flow_id}, function (data) {
                if (data.status == 1) {
                    location.reload();
                } else {
                    layer.msg("添加失败");
                }
            }, 'json');
        });
        $("#wfCleam").bind('click', function () {
            layer.confirm('你确定清空步骤吗？', {icon: 3, title: '提示'}, function (index) {
                var url = "{:url('del_allprocess')}";
                $.post(url, {"flow_id": the_flow_id}, function (data) {
                    if (data.status == 1) {
                        location.reload();
                    } else {
                        layer.msg("添加失败");
                    }
                }, 'json');
                layer.close(index);
            });

        });
    });
</script>